<template>
	<view class="mine-container">
		<view class="content-section">
			<uni-list class="mine-actions grid ">
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar'}" title="日期" :rightText="hourDate" />
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'medal'}" title="工时数"
					:rightText="useHourTotal + '小时'" />
			</uni-list>

		</view>

		<view class="help-container">
			<uni-forms ref="form" :model="form">
				<view v-for="(item, index) in form.projectHours" :key="item.projectId" class="list-title">
					<view class="childList">
						<uni-title type="h1" :title="item.projectName" color="#000000"></uni-title>
						<uni-forms-item label="类型">
							<uni-data-select v-model="item.workTypeId" :localdata="workTypeList"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="工时">
							<uni-easyinput v-model.number="item.hour" placeholder="工时数" type="number"
								@input="lookinput(index,$event)" class="input" />
							<view style="margin:0 10px">单位：小时</view>
						</uni-forms-item>

						<uni-forms-item label="日志">
							<uni-easyinput v-model="item.daily" autoHeight placeholder="请输入工作内容" type="textarea"
								class="input" />
						</uni-forms-item>
					</view>
				</view>
			</uni-forms>
		</view>
		<view class="chat-footer">
			<!-- <view class="msg-input"> {{ useHourTotal }} 小时 	</view> -->

			<view class=""> 提示：{{ submitTips }}</view>
			<view class="send-btn" @click="handleSubmit">提交工时</view>
		</view>
	</view>

</template>

<script>
	import storage from '@/utils/storage';
	import {
		getMyActorProject,
		getMyProjectAll,
		getWorkTypeSelect,
		createHour,
	} from "@/api/mhour/project";

	import {
		getAppConfig
	} from "@/api/manage/appConfig";

	export default {

		data() {
			return {

				submitTips: "",
				submitFlag: true,
				appSetting: {},
				projectList: [],
				hourDate: "",
				workTypeList: [],
				workTypeHourList: [{
					hour: 0,
					workTypeId: 1
				}],
				projectArr: [],
				form: {
					date: "",
					projectHours: [],
				},
				maxlength: 2,
				useHourTotal: 0,



			}
		},
		mounted() {
			this.hourDate = this.$route.query.hourDate;
			this.index =  this.$route.query.index;
		},
		onLoad() {
			//this.getHourSetting();
			this.getWorkType();
			this.getprojectArr(this.hourDate);
			this.getHourSetting();

		},
		onShow() {

		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			},
		},
		methods: {
			handleSubmit() {
				if (this.submitFlag) {
					this.$modal.msgError("工时超出要求，请重新输入后提交")
					return
				}
				this.form.date = this.hourDate;
				var hoursum = 0;
				var flag = true;
				this.form.projectHours.forEach(el => {
					hoursum += parseFloat(el.hour);
					el.workTypeHourList = []
					el.workTypeHourList.push({
						workTypeId: el.workTypeId,
						hour: el.hour
					})

					if (el.projectName) {
						delete el.projectName;
					}
					if (el.projectStatus) {
						delete el.projectStatus;
					}
					delete el.hour
					delete el.workTypeId

				});
				//console.log("this.appSetting.overtimeAllow", this.appSetting.overtimeAllow);
				if (this.appSetting.overtimeAllow) {
					flag = true;
				} else {

					if (hoursum > this.appSetting.workTime) {

						flag = false;
					}
				}
				if (flag) {
					console.log("开始进行提交，要提交的参数", this.form);
					createHour(this.form)
						.then(res => {
							if (res.code == 200) {
								console.log("提交成功", res);
								this.$modal.loading("提交成功")
								var pages = getCurrentPages();
								var prevPage = pages[pages.length - 2];
								uni.navigateBack({
									success: (event) => {
										prevPage.$vm.reload(this.index,res.data);
									}
								})	

								

							} else {
								//console.log("提交失败", res);
								//this.$message.error("提交失败，失败原因为：", res.msg);
								this.$modal.msgError("提交失败，失败原因为：", res.msg)

							}
						})
						.catch(err => {
							console.log(err);
						});
				}

			},

			getprojectArr(date) {
				getMyActorProject(date).then(res => {
					this.form.projectHours = [];
					if (res.code == 200) {
						this.projectArr = res.data;
						this.projectArr.forEach(el => el.hour = 0);
						this.projectArr.forEach(el => el.workTypeId = 1);
						this.projectArr.forEach(el => {
							this.form.projectHours.push(
								Object.assign({}, JSON.parse(JSON.stringify(el)))
							)
						});
					}
					//console.log("form",this.form.projectHours)
				});
			},
			getWorkType() {
				getWorkTypeSelect().then(res => {
					if (res.code == 200) {
						this.workTypeList = res.data
						if (this.workTypeList.length > 0) {
							this.workTypeList.forEach(el => {
								el.value = el.id;
								el.text = el.name;
							})
						}
					}
				});
			},



			lookinput(h, e) {
				if (e == null) {
					return
				}

				e = e.replace(/[^\d]/g, "");
				var hoursum = 0;
				this.form.projectHours[h].hour = e;
				this.form.projectHours.forEach(el => hoursum += parseFloat(el.hour));
				this.useHourTotal = hoursum;
				if (hoursum > 24) {
					this.submitFlag = true;
					this.submitTips = `工时最大范围为0-24小时!`;
				}

				if (this.appSetting.overtimeAllow) {
					this.submitTips = "可以提交!(可加班)";
					this.submitFlag = false;
				}
				if (this.appSetting.overtimeAllow && hoursum <= 24) {
					this.submitFlag = false;
					this.submitTips = "可以提交!（加班）";
				} else {
					if (hoursum > this.appSetting.workTime) {
						this.submitFlag = true;
						this.submitTips = `工时范围为0-${this.appSetting.workTime}小时!`;
					} else if (hoursum <= this.appSetting.workTime) {
						this.submitFlag = false;
						this.submitTips = "可以提交！";
					}
				}
				//console.log("执行完lookinput")
			},


			getHourSetting() {
				getAppConfig().then(res => {
					//console.log("settings", res);
					if (res.code == 200) {
						this.appSetting = res.data;
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.help-container {
		margin-bottom: 100rpx;
		padding: 30rpx;
	 
	}

	.list-title {
		margin-bottom: 30rpx;
	}

	.childList {
		background: #ffffff;
		box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
		border-radius: 10rpx;
		margin-top: 10rpx;
		

	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #F5F5F5;
	}

	.text-title {
		color: #303133;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 10rpx;

		.iconfont {
			font-size: 16px;
			margin-right: 10rpx;
		}
	}

	.text-item {
		font-size: 28rpx;
		padding: 24rpx;
	}

	.question {
		color: #606266;
		font-size: 28rpx;
	}

	.chat-footer {
		width: 100%;
		padding: 0 20upx;
		height: 120upx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f1f1f1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		border-top: 1upx solid #ddd;

		.msg-input {
			background-color: #fff;
			width: 120upx;
			height: 70upx;
			line-height: 70upx;
			font-size: 30upx;
			border-radius: 10upx;
			text-align: center;

		}

		.img-chose {
			height: 70upx;
			width: 70upx;
		}

		.send-btn {
			height: 60upx;
			line-height: 60upx;
			width: 120upx;
			text-align: center;
			background-color: green;
			color: #FFFFFF;
			border-radius: 12upx;
		}

	}

	.mb-10 {
		margin-bottom: 10px;

	}

	.mine-actions {
		margin: 15px 15px;
		padding: 20px 0px;
		border-radius: 8px;
		background-color: white;

		.action-item {
			.icon {
				font-size: 28px;
			}

			.text {
				display: block;
				font-size: 13px;
				margin: 8px 0px;
			}
		}
	}
</style>